<!DOCTYPE html>
<html lang="zh">
<head>
    <title>CodeMirror searchbox Test</title>
    <meta charset="UTF-8">
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <link rel="stylesheet" href="../examples/css/style.css"/>
</head>
<body>
<div id="layout">
    <textarea id="test" style="display:none;">###Hello world!</textarea>
</div>
<script src="../examples/js/jquery.min.js"></script>
<link rel="stylesheet" href="../lib/codemirror/codemirror.min.css"/>
<script src="../lib/codemirror/codemirror.min.js"></script>
<script src="../lib/codemirror/modes.min.js"></script>
<script src="../lib/codemirror/addons.min.js"></script>
<script src="js/searchbox.js"></script>
<style>
    html, body, #layout, .CodeMirror {
        width: 100%;
        height: 100%;
        overflow: hidden;
        font-family: Consolas;
        font-size: 13px;
    }

    .ace_search {
        font-family: "微软雅黑", Arial;
        padding-bottom: 4px;
    }

    .ace_replacebtn, .ace_button {
        padding: 0 5px;
        font-size: 12px;
    }

    .ace_button {
        border-radius: 3px;
        padding: 2px 5px;
        margin-left: 3px;
    }

    .ace_button.checked {
        border-color: #ccc;
        background-color: #fafafa;

    }

    .ace_search {
        display: inline-block;
        max-width: 320px;
    }

    .ace_search_form, .ace_replace_form {
        display: inline-block;
        float: none;
    }

    .ace_search_options {
        display: block;
    }
</style>
<script type="text/javascript">
    $(function () {
        var enableSearchbox = true;
        var codeMirrorConfig = {
            mode: "gfm",
            theme: "default",
            tabSize: 4,
            dragDrop: false,
            autofocus: true,
            indentUnit: 4,
            searchbox: enableSearchbox,  // IE9+
            lineNumbers: true,
            lineWrapping: true,
            matchBrackets: true,
            indentWithTabs: true,
            styleActiveLine: true,
            styleSelectedText: true,
            autoCloseBrackets: true,
            showTrailingSpace: true,
            highlightSelectionMatches: {
                showToken: /\w/
            }
        };

        $.get("../examples/test.md", function (md) {
            $("#test").html(md);

            var codeMirrorEditor = CodeMirror.fromTextArea($("#test")[0], codeMirrorConfig);
            var codeMirror = $(".CodeMirror");

            $(window).keydown(function () {
                if (!enableSearchbox) return false;

                $(".ace_replacebtn").eq(0).html("替换");
                $(".ace_replacebtn").eq(1).html("全部替换");
                $(".ace_searchbtn").eq(2).remove();//.html("全部").css({width: "36px", padding :"0 4px"});

                $(".ace_button").eq(0).html("正则搜索");
                $(".ace_button").eq(1).html("区分大小写");
                $(".ace_button").eq(2).html("全词搜索");
            });
        });
    });
</script>
</body>
</html>